<template>
  <view>
	<navbar>布局</navbar>
    <view :class="c_card">
      <view class="p-20-0 fw-b">尺寸</view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-32">
        <text :class="c_strong">w-xx(0~750):</text>{width:
        xx(0~750rpx);}/*宽*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">h-xx(0~750):</text>{height:
        xx(0~750rpx);}/*高*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">w100:</text>{width:
        100%;}/*相对父级100%宽*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">h100:</text>{height:
        100%;}/*相对父级100%高*/
      </view>
	  <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
      </view>
      <view class="mt-20">
        <view>
          <view>父 class="<text class="fw-b c-red">w-300 h-200</text>"</view>
          <view>子 class="<text class="fw-b c-red">w-200 h-100</text>"</view>
          <view class="mt-20 w-300 h-200 bg-f1 mt-20">
            <view class="w-200 h-100 bg-999"></view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>父 class="<text class="fw-b c-red">w-300 h-200</text>"</view>
          <view>子 class="<text class="fw-b c-red">w-120 h100</text>"</view>
          <view class="mt-20 w-300 h-200 bg-f1 mt-20">
            <view class="w-120 h100 bg-999"></view>
          </view>
        </view>
      </view>
    </view>
    <view :class="c_card">
      <view class="fs-32 p-20-0 fw-b">定位</view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-32">
        <text :class="c_strong">pt-f:</text>{position:
        fixed;}/*根据窗口绝对定位*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">pt-r:</text>{position:
        relative;}/*相对定位*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">pt-a:</text>{position:
        absolute;}/*根据父级绝对定位*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">top-0:</text>{top: 0;}/*上为0*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">lef-0:</text>{left: 0;}/*左为0*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">bot-0:</text>{bottom: 0;}/*下为0*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">rig-0:</text>{right: 0;}/*右为0*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">all-0:</text>{top: 0;left: 0;right:
        0;bottom: 0;}/*四面为0，占满整个父空间*/
      </view>
	  <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
      </view>
      <view class="mt-20">
        <view>
          <view>父class="<text class="fw-b c-red">pt-r</text>"</view>
          <view>子class="<text class="fw-b c-red">pt-a rig-0</text>"</view>
          <view class="w-150 h-150 pt-r bg-f1 c-fff mt-20">
            <view class="h-40 w-40 pt-a rig-0 dp-fc bg-999 b-2">子</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>父class="<text class="fw-b c-red">pt-r</text>"</view>
          <view>子class="<text class="fw-b c-red">pt-a rig-0 bot-0</text>"</view>
          <view class="w-150 h-150 pt-r bg-f1 c-fff mt-20">
            <view class="h-40 w-40 pt-a rig-0 bot-0 dp-fc bg-999 b-2">子</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>父class="<text class="fw-b c-red">pt-r</text>"</view>
          <view>子class="<text class="fw-b c-red">pt-a all-0</text>"</view>
          <view class="w-150 h-150 pt-r bg-f1 c-fff mt-20">
            <view class="pt-a all-0 dp-fc bg-999 b-2">子</view>
          </view>
        </view>
      </view>
    </view>
    <view :class="c_card">
      <view class="fs-32 p-20-0 fw-b">box类型</view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-32">
        <text :class="c_strong">dp-ib:</text>{display:
        inline-block;}/*行内块元素*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">dp-f:</text>{display:
        flex;}/*设置为弹性box*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">dp-fc:</text>{display:
        flex;align-items: center; justify-content: center;}/*快捷水平垂直居中*/
      </view>
	  <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
      </view>
      <view class="dp-f fd-c mt-20">
        <view>class="<text class="fw-b c-red">dp-fc</text>"</view>
        <view class="dp-fc fs-32 jc-sa c-999 mt-20 w-150 h-150 bg-f1 mt-20">
          dp-fc
        </view>
      </view>
    </view>
    <view :class="c_card">
      <view class="fs-32 p-20-0 fw-b">子项占用空间比例</view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">f-xx(1~10):</text
        >{flex:xx(1~10);}/* 子项占用空间比例,父级需要<text
          :class="c_strong"
          >dp-f</text
        >
        */
      </view>
	  <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
      </view>
      <view class="mt-20">
        <view class="w-600 h-100 dp-f bg-f1 c-fff">
          <view class="h-100 dp-fc f-1 bg-999 b-2">f-1</view>
          <view class="h-100 dp-fc f-2 bg-999 b-2">f-2</view>
          <view class="h-100 dp-fc f-1 bg-999 b-2">f-1</view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="w-600 h-100 dp-f bg-f1 c-fff mt-20">
          <view class="h-100 dp-fc f-1 bg-999 b-2">f-1</view>
          <view class="h-100 dp-fc f-2 bg-999 b-2">f-2</view>
          <view class="h-100 dp-fc f-1 bg-999 b-2">f-1</view>
          <view class="h-100 dp-fc f-5 bg-999 b-2">f-5</view>
        </view>
      </view>
    </view>
    <view :class="c_card">
      <view class="fs-32 p-20-0 fw-b">flex主轴方向</view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">fd-rr:</text
        >{flex-direction:row-reverse;}/* 主轴方向从右到左,默认从左到右 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">fd-c:</text
        >{flex-direction:column;}/* 主轴方向从上到下,默认从左到右 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">fd-c:</text
        >{flex-direction:column-reverse;}/* 主轴方向从下到上,默认从左到右 */
      </view>
	  <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
      </view>
      <view class="mt-20">
        <view>
          <view>class="dp-fc"(默认)</view>
          <view class="w-150 h-150 dp-fc bg-f1 c-fff mt-20">
            <view :class="c_sonBox">1</view>
            <view :class="c_sonBox">2</view>
            <view :class="c_sonBox">3</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-fc{{' '}}<text class="fw-b c-red">fd-rr</text>"</view>
          <view class="w-150 h-150 dp-fc fd-rr bg-f1 c-fff mt-20">
            <view :class="c_sonBox">1</view>
            <view :class="c_sonBox">2</view>
            <view :class="c_sonBox">3</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-fc{{' '}}<text class="fw-b c-red">fd-c</text>"</view>
          <view class="w-150 h-150 dp-fc fd-c bg-f1 c-fff mt-20">
            <view :class="c_sonBox">1</view>
            <view :class="c_sonBox">2</view>
            <view :class="c_sonBox">3</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-fc{{' '}}<text class="fw-b c-red">fd-cr</text>"</view>
          <view class="w-150 h-150 dp-fc fd-cr bg-f1 c-fff mt-20">
            <view :class="c_sonBox">1</view>
            <view :class="c_sonBox">2</view>
            <view :class="c_sonBox">3</view>
          </view>
        </view>
      </view>
    </view>
    <view :class="c_card">
      <view class="fs-32 p-20-0 fw-b">flex-wrap换行 (默认不换行)</view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">fw-w:</text>{flex-wrap: wrap;}/*
        换行，第一行在上方。 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">fw-wr:</text>{flex-wrap:
        wrap-reverse;}/* 换行，第一行在下方。 */
      </view>
	  <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
      </view>
      <view class="mt-20">
        <view>
          <view>class="dp-f"(默认)</view>
          <view class="w-150 h-150 dp-f bg-f1 c-fff mt-20">
            <view :class="c_sonBox">1</view>
            <view :class="c_sonBox">2</view>
            <view :class="c_sonBox">3</view>
            <view :class="c_sonBox">4</view>
            <view :class="c_sonBox">5</view>
            <view :class="c_sonBox">6</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-f{{' '}}<text class="fw-b c-red">fw-w</text>"</view>
          <view class="w-150 h-150 dp-f fw-w bg-f1 c-fff mt-20">
            <view :class="c_sonBox">1</view>
            <view :class="c_sonBox">2</view>
            <view :class="c_sonBox">3</view>
            <view :class="c_sonBox">4</view>
            <view :class="c_sonBox">5</view>
            <view :class="c_sonBox">6</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-f{{' '}}<text class="fw-b c-red">fw-wr</text>"</view>
          <view class="w-150 h-150 dp-f fw-wr bg-f1 c-fff mt-20">
            <view :class="c_sonBox">1</view>
            <view :class="c_sonBox">2</view>
            <view :class="c_sonBox">3</view>
            <view :class="c_sonBox">4</view>
            <view :class="c_sonBox">5</view>
            <view :class="c_sonBox">6</view>
          </view>
        </view>
      </view>
    </view>
    <view :class="c_card">
      <view class="fs-32 p-20-0 fw-b">justify-content主轴对齐</view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">jc-fs:</text>{justify-content:
        flex-start;}/* 在主轴左对齐-默认 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">jc-fe:</text>{justify-content:
        flex-end;}/* 在主轴右对齐*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">jc-c:</text>{justify-content:
        center;}/* 在主轴居中对齐 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">jc-sa:</text>{justify-content:
        space-around;}/* 等间隔对齐 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">jc-sb:</text>{justify-content:
        space-between;}/* 两端对齐（两边不留空） */
      </view>
	  <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
      </view>
      <view class="mt-20">
        <view>
          <view>class="dp-f"(默认)</view>
          <view class="w-150 h-80 dp-f bg-f1 c-fff mt-20">
            <view :class="c_sonBox2">1</view>
            <view :class="c_sonBox2">2</view>
            <view :class="c_sonBox2">3</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-f{{' '}}<text class="fw-b c-red">jc-fe</text>"</view>
          <view class="w-150 h-80 dp-f jc-fe bg-f1 c-fff mt-20">
            <view :class="c_sonBox2">1</view>
            <view :class="c_sonBox2">2</view>
            <view :class="c_sonBox2">3</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-f{{' '}}<text class="fw-b c-red">jc-c</text>"</view>
          <view class="w-150 h-80 dp-f jc-c bg-f1 c-fff mt-20">
            <view :class="c_sonBox2">1</view>
            <view :class="c_sonBox2">2</view>
            <view :class="c_sonBox2">3</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-f{{' '}}<text class="fw-b c-red">c-sa</text>"</view>
          <view class="w-150 h-80 dp-f jc-sa bg-f1 c-fff mt-20">
            <view :class="c_sonBox2">1</view>
            <view :class="c_sonBox2">2</view>
            <view :class="c_sonBox2">3</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-f{{' '}}<text class="fw-b c-red">jc-sb</text>"</view>
          <view class="w-150 h-80 dp-f jc-sb bg-f1 c-fff mt-20">
            <view :class="c_sonBox2">1</view>
            <view :class="c_sonBox2">2</view>
            <view :class="c_sonBox2">3</view>
          </view>
        </view>
      </view>
    </view>
    <view :class="c_card">
      <view class="fs-32 p-20-0 fw-b">align-items交叉轴对齐</view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">ai-fs:</text>{align-items:
        flex-start;}/* 在交叉左对齐-默认 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">ai-fe:</text>{align-items:
        flex-end;}/* 在交叉右对齐*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">ai-c:</text>{align-items:
        center;}/* 在交叉居中对齐 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">ai-bl:</text>{align-items:
        baseline;}/* 根据文字对齐 */
      </view>
	  <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
      </view>
      <view class="mt-20">
        <view>
          <view>class="dp-f"(默认)</view>
          <view class="w-150 h-150 dp-f bg-f1 c-fff mt-20">
            <view :class="c_sonBox2">1</view>
            <view :class="c_sonBox2">2</view>
            <view :class="c_sonBox2">3</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-f{{' '}}<text class="fw-b c-red">ai-fe</text>"</view>
          <view class="w-150 h-150 dp-f ai-fe bg-f1 c-fff mt-20">
            <view :class="c_sonBox2">1</view>
            <view :class="c_sonBox2">2</view>
            <view :class="c_sonBox2">3</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-f{{' '}}<text class="fw-b c-red">ai-c</text>"</view>
          <view class="w-150 h-150 dp-f ai-c bg-f1 c-fff mt-20">
            <view :class="c_sonBox2">1</view>
            <view :class="c_sonBox2">2</view>
            <view :class="c_sonBox2">3</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-f{{' '}}<text class="fw-b c-red">ai-bl</text>"</view>
          <view class="w-150 h-150 dp-f ai-bl bg-f1 c-fff mt-20">
            <view class="h-100 w-30 dp-fc bg-999">1</view>
            <view class="h-40 w-30 dp-fc bg-999">2</view>
            <view class="h-70 w-30 dp-fc bg-999">3</view>
          </view>
        </view>
      </view>
    </view>
    <view :class="c_card">
      <view class="fs-32 p-20-0 fw-b">align-content多列对齐</view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">ac-fs:</text>{align-content:
        flex-start;}/* 与交叉轴的起点对齐 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">ac-fe:</text>{align-content:
        flex-end;}/* 与交叉轴的终点对齐*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">ac-c:</text>{align-content:
        center;}/* 与交叉轴的中点对齐 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">ac-sa:</text>{align-content:
        space-around;}/* 每根轴线两侧的间隔都相等 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">ac-sb:</text>{align-content:
        space-between;}/* 与交叉轴两端对齐，轴线之间的间隔平均分布 */
      </view>
	  <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
      </view>
      <view class="mt-20">
        <view>
          <view>class="dp-f{{' '}}fw-w{{' '}}<text class="fw-b c-red">ac-fs</text>"</view>
          <view class="w-130 h-180 dp-f fw-w ac-fs bg-f1 c-fff mt-20">
            <view :class="c_sonBox3">1</view>
            <view :class="c_sonBox3">2</view>
            <view :class="c_sonBox3">3</view>
            <view :class="c_sonBox3">4</view>
            <view :class="c_sonBox3">5</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-f{{' '}}fw-w{{' '}}<text class="fw-b c-red">ac-fe</text>"</view>
          <view class="w-130 h-180 dp-f fw-w ac-fe bg-f1 c-fff mt-20">
            <view :class="c_sonBox3">1</view>
            <view :class="c_sonBox3">2</view>
            <view :class="c_sonBox3">3</view>
            <view :class="c_sonBox3">4</view>
            <view :class="c_sonBox3">5</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-f{{' '}}fw-w{{' '}}<text class="fw-b c-red">ac-c</text>"</view>
          <view class="w-130 h-180 dp-f fw-w ac-c bg-f1 c-fff mt-20">
            <view :class="c_sonBox3">1</view>
            <view :class="c_sonBox3">2</view>
            <view :class="c_sonBox3">3</view>
            <view :class="c_sonBox3">4</view>
            <view :class="c_sonBox3">5</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-f{{' '}}fw-w{{' '}}<text class="fw-b c-red">ac-sa</text>"</view>
          <view class="w-130 h-180 dp-f fw-w ac-sa bg-f1 c-fff mt-20">
            <view :class="c_sonBox3">1</view>
            <view :class="c_sonBox3">2</view>
            <view :class="c_sonBox3">3</view>
            <view :class="c_sonBox3">4</view>
            <view :class="c_sonBox3">5</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view>class="dp-f fw-w <text class="fw-b c-red">ac-sb</text>"</view>
          <view class="w-130 h-180 dp-f fw-w ac-sb bg-f1 c-fff mt-20">
            <view :class="c_sonBox3">1</view>
            <view :class="c_sonBox3">2</view>
            <view :class="c_sonBox3">3</view>
            <view :class="c_sonBox3">4</view>
            <view :class="c_sonBox3">5</view>
          </view>
        </view>
      </view>
    </view>
    <view :class="c_card">
      <view class="fs-32 p-20-0 fw-b">align-self子元素特殊处理(默认auto)</view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">as-fs:</text>{align-self:
        flex-start;}/* 自身在交叉左对齐 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">as-fe:</text>{align-self:
        flex-end;}/* 自身在交叉右对齐*/
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">as-c:</text>{align-self: center;}/*
        自身在交叉居中对齐 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">as-bl:</text>{align-self:
        baseline;}/* 自身根据文字对齐 */
      </view>
	  <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
      </view>
      <view class="mt-20">
        <view>
          <view class="as-fs">父：dp-f ai-fe</view>
          <view class="as-fs">子3：<text class="fw-b c-red">as-fs</text></view>
          <view class="w-150 h-150 dp-f ai-fe bg-f1 c-fff mt-20">
            <view :class="c_sonBox2">1</view>
            <view :class="c_sonBox2">2</view>
            <view :class="c_sonBox2" class="as-fs">3</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view class="as-fs">父：dp-f</view>
          <view class="as-fs">子3：<text class="fw-b c-red">as-fe</text></view>
          <view class="w-150 h-150 dp-f bg-f1 c-fff mt-20">
            <view :class="c_sonBox2">1</view>
            <view :class="c_sonBox2">2</view>
            <view :class="c_sonBox2" class="as-fe">3</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view class="as-fs">父：dp-f ai-fe</view>
          <view class="as-fs">子3：<text class="fw-b c-red">as-c</text></view>
          <view class="w-150 h-150 dp-f bg-f1 c-fff mt-20">
            <view :class="c_sonBox2">1</view>
            <view :class="c_sonBox2">2</view>
            <view :class="c_sonBox2" class="as-c">3</view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-32">
          <view class="as-fs">父：dp-f ai-fe</view>
          <view class="as-fs">子3：<text class="fw-b c-red">as-ib</text></view>
          <view class="w-150 h-150 dp-f ai-bl bg-f1 c-fff mt-20">
            <view class="h-100 w-30 dp-fc bg-999">1</view>
            <view class="h-40 w-30 dp-fc bg-999">2</view>
            <view class="h-70 w-30 dp-f jc-c as-ib bg-999">3</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "layout",
  data() {
    return {
		c_sonBox:'h-40 w-40 dp-fc bg-999 b-2',
		c_sonBox2:'h-30 w-30 dp-fc bg-999',
		c_sonBox3:'h-30 w-50 dp-fc bg-999'
	};
  },

  methods: {}
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
</style>
